<template>
  <div class="state-change-node">
    <el-form label-position="top" :rules="rules" label-width="80px" :model="formData" ref='nodeForm'>
      <div class="signal-list">
        <signal-list-item
          v-for="(item, index) in formData.signals"
          :key="`signal${index}`"
          :ref="`signal${index}`"
          :signalData="item"
          :signalListData="signalListData"
          :signalListOptions="signalListOptions"
          @change="signalChange($event, item)"
          @delete="removeSignal(index)">
        </signal-list-item>
        <!-- <el-button v-if="formData.signals.length < maxSignal" type="text" class="add-signal" @click="addSignal">
          <i class="el-icon-circle-plus"></i>
          添加信号
        </el-button> -->
      </div>
    </el-form>
  </div>
</template>

<script>
import { deepClone } from '@/utils/helper/jsUtil'
import RuleNodeBaseClass from '@/components/ruleNode/RuleNodeBaseClass'
import SignalListItem from './components/signalListItem.vue'
import { adapterSignalList, formatSignalList, addStruct } from './stateChangeNode.util'
import { mapActions } from 'vuex'

export default {
  name: 'AdvancedLibStateChangeNode',
  mixins: [RuleNodeBaseClass],
  components: { SignalListItem },
  props: {
  },
  data() {
    return {
      maxSignal: 10,
      formData: {
        signals: []
      },
      signalListData: {},
      signalListOptions: [],
      rules: {
      }
    }
  },
  mounted() {
  },
  methods: {
    async initValue() {
      const initFormData = this.initialForm ? deepClone(this.initialForm) : {}
      await this.getTreeList()
      Object.assign(this.formData, initFormData)
      this.formData.signals = this.formData.signals || []
      // 默认创建一条数据
      if (!this.formData.signals.length) {
        this.addSignal()
      }
    },
    async getTreeList() {
      const res = await this.getSignal('vehicleSignal')
      this.signalListData = addStruct(res)
      const options = adapterSignalList(res.options)
      this.signalListOptions = formatSignalList(options)
    },
    addSignal() {
      if (this.formData.signals.length < this.maxSignal) {
        this.formData.signals.push({
          signalName: '',
          signalKey: '',
          metaModelId: '',
          stateChange: {
            fromOperator: '',
            fromValue: 0,
            toOperator: '',
            toValue: 0
          }
        })
      }
    },
    removeSignal(index) {
      if (this.formData.signals.length > 1) {
        const signals = deepClone(this.formData.signals)
        signals.splice(index, 1)
        signals.forEach(signal => { signal.metaModelId = signal.metaModelId.at(-1) })
        this.formData.signals = []
        this.$nextTick(() => {
          this.formData.signals.push(...signals)
          this.updateOptions()
        })
      }
    },
    updateOptions() {
      const signalsIdList = this.formData.signals.map(item => { return item.metaModelId ? item.metaModelId.at(-1) : '' })
      this.signalListOptions.forEach(item => {
        item.children.forEach(leafItem => {
          leafItem.disabled = signalsIdList.includes(leafItem.value)
        })
      })
    },
    signalChange(emitData, signalItem) {
      Object.assign(signalItem, emitData)
      this.updateOptions()
    },
    getFormData() {
      const data = deepClone(this.formData)
      data.signals.forEach(signalItem => {
        if (signalItem.metaModelId && signalItem.metaModelId.includes('&_&')) { // 选中了车端结构体信号，需要把metaModelId转为后端用的格式
          signalItem.metaModelId = signalItem.signalId
        }
      })
      return data
    },
    validateForm() {
      let isValid = true
      // 信号表单校验
      this.formData.signals.forEach((item, index) => {
        const signal = this.$refs[`signal${index}`]
        signal[0].$refs.signalForm.validate(valid => { (!valid) && (isValid = false) })
      })
      return isValid
    },
    ...mapActions('signal', ['getSignal'])
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.state-change-node {
  .el-form{
    overflow: visible;
  }
  .add-signal{
    font-size: 14px;
    padding: 0 0 6px;
  }
}
</style>
